<template>
  <view>
    <uv-navbar
      title="完结工单"
      placeholder
      bg-color="#fff"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    >
      <template #right>
        <uv-text text="提交" color="#4EA770" size="28rpx" @click="handleSubmit" />
      </template>
    </uv-navbar>
    <view class="examine">
      <view class="title"> 备注信息 </view>
      <uv-textarea
        v-model="forms.remark"
        placeholder="请输入备注信息"
        border="bottom"
        :placeholder-style="{
          color: '#bdbdbd',
          fontSize: '28rpx',
        }"
      />
    </view>
    <view class="listImg">
      <view class="ss-m-y-10 ss-m-x-16 ss-flex ss-col-bottom ss-row-between">
        <view class="ss-grey-2"> <text style="color: #f00">*</text>上传附件 </view>
        <view class="ss-grey-1 ss-flex ss-col-center" @click="onChangeAvatar">
          选择附件
          <uv-icon name="arrow-right" color="#757575" size="16" />
        </view>
      </view>
      <view class="image-box" v-if="forms.annexUrl.length">
        <view v-for="(url, k) in forms.annexUrl" :key="k" class="image-item">
          <view class="image-del" @click="deletePic(k)">
            <uv-icon name="close" color="#fff" />
          </view>
          <image :src="webSrc(url)" mode="aspectFill" @click="previewImage(k)" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addOrderRecord } from "@/request/order";
import { commonUpload } from "@/request/common.js";
import { webSrc } from "@/common/mothed.js";

const forms = reactive({
  workOrderId: "", // 工单id
  remark: "", // 备注信息
  type: "6", // 审核类型
  annexUrl: [], // 附件
});

onLoad((e) => {
  forms.workOrderId = e.id;
});

// 提交工单操作记录
const handleSubmit = () => {
  let data = Object.assign({}, forms);
  if (data.annexUrl.length == 0) {
    uni.showToast({
      title: "请上传附件",
      icon: "none",
    });
    return;
  }
  data.annexUrl = forms.annexUrl.join(",");
  addOrderRecord(data).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "提交成功",
        icon: "success",
        success: () => {
          setTimeout(() => {
            uni.$emit("order");
            uni.navigateBack({
              delta: 1,
            });
          }, 1500);
        },
      });
    }
  });
};

//上传附件
const onChangeAvatar = () => {
  uni.chooseImage({
    count: 9 - forms.annexUrl.length,
    sizeType: ["compressed"],
    success: (image) => {
      image.tempFilePaths.forEach((i) => {
        commonUpload(i).then((res) => {
          if (res.code == 200) {
            forms.annexUrl.push(res.fileName);
          }
        });
      });
    },
    fail: () => {
      uni.showToast({
        title: "获取权限失败",
        icon: "none",
      })
    }
  });
}

// 删除图片
const deletePic = (index) => {
  uni.showModal({
    title: "提示",
    content: "确定是否删除？",
    showCancel: true,
    success: ({ confirm }) => {
      if (confirm) {
        forms.annexUrl.splice(index, 1);
      }
    },
  });
};

// 预览图片
const previewImage = (k) => {
  uni.previewImage({
    urls: forms.annexUrl.map((i) => webSrc(i)),
    current: k,
  });
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.listImg {
  width: 94%;
  margin: 20rpx auto;
  overflow: hidden;

  .image-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    width: 100%;
    margin-top: 20rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .image-item {
      position: relative;
      height: 156rpx;
      overflow: hidden;
      border-radius: 8rpx;
      background: rgba(0, 0, 0, 0.1);

      .image-del {
        position: absolute;
        top: 0;
        right: 0;
        width: 42rpx;
        height: 42rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0 8rpx 0 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.examine {
  padding: 0 30rpx;

  .title {
    font-size: 28rpx;
    color: #757575;
    padding-left: 16rpx;
    margin-top: 20rpx;

    text {
      color: #bdbdbd;
      font-size: 24rpx;
    }
  }

  .user-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20rpx;
  }
}
</style>
